<script type="text/javascript" src="__PUBLIC__/js/jquery/lin_gaplessText.js"></script>
                        	<div class="jqueryTitle mt5">
                            	<span>实现原理</span>
                            </div>
                            <div class="p15">
                            	通过在执行完动画后，把对应的滚动对象添加到容器对应地方，特别注意的就是添加元素的时机，具体还是看代码吧，用语言我还真无法形容。
                            </div>
                            
                        	<div class="jqueryTitle mt5">
                            	<span>相关参数</span>
                            </div>
                            <div class="p15">
                            	<table cellpadding="0" cellspacing="0" class="jqueryAttr">
                                	<thead>
                                    	<tr>
                                        	<th>参数名</th>
                                            <th>参数说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
		<tr>
        	<td>targetObj</td>
            <td>被控制对象,默认li(可以是标签名或者类名)</td>
        </tr>
        <tr>
        	<td>effect</td>
            <td>动画效果,默认yToBottom(yToBottom-从上到下 yToTop-从下到上 xToLeft-从右到左 xToRight-从左到右)</td>
        </tr>
        <tr>
        	<td>speed</td>
            <td>动画时间,默认1000</td>
        </tr>
        <tr>
        	<td>timer</td>
            <td>自动播放时间间隔,默认3000</td>
        </tr>
        </tbody>
                                </table>
                            </div> 
                            <div class="jqueryTitle mt5">
                            	<span>演示效果</span>
                            </div>
                            <div class="p15">
                            	<p class="pt15">前期准备：头部加入jquery-1.7.2.min.js;lin_gaplessText.js文件</p>
                            	<div class="pt15"><strong>效果一:文字从上到下移动</strong></div>
                                <p>CSS</p>
                                <pre>.lin_scrollWrap{position:relative;border:1px solid #999; height:120px;overflow:hidden; width:300px; margin-right:10px;}
.lin_word{ width:300px; height:120px;padding-left:10px; position:absolute; left:0px; top:0px;}
.lin_word li{height:24px; line-height:24px; overflow:hidden;}</pre>
                                <p>js</p>
                                <pre>$("#demo1").lin_gaplessText();</pre>
             <div class="blank10"></div>
        		<div class="lin_scrollWrap">
                	<ul class="lin_word" id="demo1">
                		<li><a href="#" title="一周热点：熊猫人来了 网易要再战三年">1.一周热点：熊猫人来了 网易要再战三年</a></li>
                    	<li><a href="#" title="这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏">2.这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏</a></li>
                    	<li><a href="#" title="熊猫人视频全报道 国风坐骑华丽技能一网打尽">3.熊猫人视频全报道 国风坐骑华丽技能一网打尽</a></li>
                    	<li><a href="#" title="南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘">4.南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘</a></li>
                    	<li><a href="#" title="美漫画家笔下的成人童话图 让人肾上腺素飙升">5.美漫画家笔下的成人童话图 让人肾上腺素飙升</a></li>
                	</ul>
                </div>
                
			<div class="pt15"><strong>效果二:文字从下到上移动</strong></div>
                                <p>CSS</p>
                                <pre>.lin_scrollWrap{position:relative;border:1px solid #999; height:120px;overflow:hidden; width:300px; margin-right:10px;}
.lin_word{ width:300px; height:120px;padding-left:10px; position:absolute; left:0px; top:0px;}
.lin_word li{height:24px; line-height:24px; overflow:hidden;}</pre>
                                <p>js</p>
                                <pre>$("#demo2").lin_gaplessText({effect:"yToTop"});</pre>
             <div class="blank10"></div>
        		<div class="lin_scrollWrap">
                	<ul class="lin_word" id="demo2">
                		<li><a href="#" title="一周热点：熊猫人来了 网易要再战三年">1.一周热点：熊猫人来了 网易要再战三年</a></li>
                    	<li><a href="#" title="这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏">2.这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏</a></li>
                    	<li><a href="#" title="熊猫人视频全报道 国风坐骑华丽技能一网打尽">3.熊猫人视频全报道 国风坐骑华丽技能一网打尽</a></li>
                    	<li><a href="#" title="南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘">4.南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘</a></li>
                    	<li><a href="#" title="美漫画家笔下的成人童话图 让人肾上腺素飙升">5.美漫画家笔下的成人童话图 让人肾上腺素飙升</a></li>
                	</ul>
                </div>

<div class="pt15"><strong>效果三:文字从左到右移动</strong></div>
                                <p>CSS</p>
                                <pre>.lin_scrollWrap{position:relative;border:1px solid #999; height:120px;overflow:hidden; width:300px; margin-right:10px;}
.lin_word_x{position:absolute; left:0px; top:0px;}
.lin_word_x li{float:left; width:290px; overflow:hidden; height:24px; line-height:24px; padding-left:10px;}</pre>
                                <p>js</p>
                                <pre>$("#demo3").lin_gaplessText({effect:"xToRight"});</pre>
             <div class="blank10"></div>
        		<div class="lin_scrollWrap" style="height:24px;">
                	<ul class="lin_word_x" id="demo3">
                		<li><a href="#" title="一周热点：熊猫人来了 网易要再战三年">1.一周热点：熊猫人来了 网易要再战三年</a></li>
                    	<li><a href="#" title="这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏">2.这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏</a></li>
                    	<li><a href="#" title="熊猫人视频全报道 国风坐骑华丽技能一网打尽">3.熊猫人视频全报道 国风坐骑华丽技能一网打尽</a></li>
                    	<li><a href="#" title="南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘">4.南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘</a></li>
                    	<li><a href="#" title="美漫画家笔下的成人童话图 让人肾上腺素飙升">5.美漫画家笔下的成人童话图 让人肾上腺素飙升</a></li>
                	</ul>
                </div> 
                
<div class="pt15"><strong>效果四:文字从右到左移动</strong></div>
                                <p>CSS</p>
                                <pre>.lin_scrollWrap{position:relative;border:1px solid #999; height:120px;overflow:hidden; width:300px; margin-right:10px;}
.lin_word_x{position:absolute; left:0px; top:0px;}
.lin_word_x li{float:left; width:290px; overflow:hidden; height:24px; line-height:24px; padding-left:10px;}</pre>
                                <p>js</p>
                                <pre>$("#demo3").lin_gaplessText({effect:"xToRight"});</pre>
             <div class="blank10"></div>
        		<div class="lin_scrollWrap" style="height:24px;">
                	<ul class="lin_word_x" id="demo4">
                		<li><a href="#" title="一周热点：熊猫人来了 网易要再战三年">1.一周热点：熊猫人来了 网易要再战三年</a></li>
                    	<li><a href="#" title="这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏">2.这浓浓的宋兵乙感觉 魔兽5.0声望任务套装赏</a></li>
                    	<li><a href="#" title="熊猫人视频全报道 国风坐骑华丽技能一网打尽">3.熊猫人视频全报道 国风坐骑华丽技能一网打尽</a></li>
                    	<li><a href="#" title="南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘">4.南诏之乱！《剑网3》新资料片史诗剧情重磅揭秘</a></li>
                    	<li><a href="#" title="美漫画家笔下的成人童话图 让人肾上腺素飙升">5.美漫画家笔下的成人童话图 让人肾上腺素飙升</a></li>
                	</ul>
                </div>                                                
                            	                             
                                
                            </div>  

                            <div class="clearfix pt40 pb40">
                            	<a href="http://url.cn/VQFOjd" title="《{$data.title}》源代码下载" class="jqueryDown" rel="nofollow" target="_blank">《{$data.title}》源代码下载</a>
                            </div>   
                        
 
 <script type="text/javascript">
 $(function(){
	 	$("#demo1").lin_gaplessText();
		$("#demo2").lin_gaplessText({effect:"yToTop"});
		$("#demo3").lin_gaplessText({effect:"xToRight"});
		$("#demo4").lin_gaplessText({effect:"xToLeft"});
	});
 </script>   
